"use client"

import React from "react"
import { useServerInsertedHTML } from "next/navigation"
import { StyleProvider, createCache, extractStyle } from "@ant-design/cssinjs"

export default function AntdStyleRegistry({
  children,
}: {
  children: React.ReactNode
}) {
  const cache = React.useMemo(() => createCache(), [])

  useServerInsertedHTML(() => {
    const css = extractStyle(cache, true)
    return <style id="antd-cssinjs" dangerouslySetInnerHTML={{ __html: css }} />
  })

  return <StyleProvider cache={cache}>{children}</StyleProvider>
}